<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- 引入样式 -->
    <link href="http://cdn.bootcss.com/element-ui/1.2.1/theme-default/index.css" rel="stylesheet">
    <style>
        .demo-table-expand {
            font-size: 0;
        }
        .demo-table-expand label {
            width: 90px;
            color: #99a9bf;
        }
        .demo-table-expand .el-form-item {
            margin-right: 0;
            margin-bottom: 0;
            width: 50%;
        }
    </style>
</head>
<body>
<div id="app">
    <template>
        <el-table
                :data="tableData"
                border
                style="width: 1000px">
            <el-table-column type="expand">
                <template scope="props">
                    <el-table :data="props.row.cube" border style="width: 100%">
                        <el-table-column prop="stock_symbol" label="编号" width="120">
                            <template scope="scope">
                                <el-button type="text" @click="showDetail(scope.row.stock_symbol)">
                                @{{ scope.row.stock_symbol }}
                                </el-button>
                            </template>
                        </el-table-column>
                        <el-table-column prop="stock_name" label="名称" width="120"></el-table-column>
                        <el-table-column prop="weight" label="仓位">
                            <template scope="scope">
                                <el-tag v-bind:type="dealClass(scope.row.prev_weight_adjusted, scope.row.weight)">
                                    @{{ dealText(scope.row.prev_weight_adjusted, scope.row.weight) }}
                                </el-tag>
                                @{{ scope.row.prev_weight_adjusted }} -> @{{ scope.row.weight }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="price" label="价格">
                            <template scope="scope">
                                @{{ scope.row.prev_price }} -> @{{ scope.row.price }}
                            </template>
                        </el-table-column>
                    </el-table>
                </template>
            </el-table-column>
            <el-table-column
                    prop="id"
                    label="ID">
                <template scope="scope">
                    @{{ scope.row.id }}
                    <el-tag v-if="scope.row.category == 'sys_rebalancing'" type="warning">分红</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                    prop="code"
                    label="编号">
            </el-table-column>
            <el-table-column
                    prop="updated_at"
                    label="时间">
                <template scope="scope">
                    <el-icon name="time"></el-icon>
                    <span style="margin-left: 5px">@{{ dateFormat(scope.row.updated_at) }}</span>
                </template>
            </el-table-column>
        </el-table>
    </template>
    <el-dialog title="详情" v-model="dialogTableVisible">
        <el-table
                :data="gridData"
                border
                height="500"
                style="width: 100%;"
                @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column label="组合" width="150">
                <template scope="scope">
                    @{{ scope.row.code }}
                    <el-tag v-if="scope.row.category == 'sys_rebalancing'" type="warning">分红</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="stock_name" label="名称" width="100"></el-table-column>
            <el-table-column
                    prop="weight"
                    label="仓位">
                <template scope="scope">
                    <el-tag v-bind:type="dealClass(scope.row.prev_weight_adjusted, scope.row.weight)">
                        @{{ dealText(scope.row.prev_weight_adjusted, scope.row.weight) }}
                    </el-tag>
                    @{{ scope.row.prev_weight_adjusted }} -> @{{ scope.row.weight }}
                </template>
            </el-table-column>
            <el-table-column
                    prop="price"
                    label="价格" width="170">
                <template scope="scope">
                    @{{ scope.row.price }}
                </template>
            </el-table-column>
            <el-table-column label="时间">
                <template scope="scope">
                    <el-icon name="time"></el-icon>
                    <span style="margin-left: 5px">@{{ dateFormat(scope.row.updated_at) }}</span>
                </template>
            </el-table-column>
        </el-table>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="danger" @click="handleDelete()">删 除</el-button>
        </div>
    </el-dialog>
</div>
</body>
<!-- 先引入 Vue -->
<script src="http://cdn.bootcss.com/vue/2.2.1/vue.min.js"></script>
<!-- 引入组件库 -->
<script src="http://cdn.bootcss.com/element-ui/1.2.1/index.js"></script>
<script>
    new Vue({
        el: '#app',
        methods: {
            dateFormat(timestamp) {
                var d = new Date(timestamp * 1000);
                var year   = d.getFullYear();
                var month  = d.getMonth() + 1;
                var date   = d.getDate();
                var hour   = d.getHours();
                hour = hour < 10 ? "0" + hour : hour;
                var minute = d.getMinutes();
                minute = minute < 10 ? "0" + minute : minute;
                var second = d.getSeconds();
                second = second < 10 ? "0" + second : second;
                return year+"-"+month+"-"+date+" "+hour+":"+minute+":"+second;
            },
            dealClass(prev, curr) {
                prev = parseFloat(prev);
                curr = parseFloat(curr);
                if (prev > curr) {
                    return 'gray';
                } else if (prev < curr) {
                    return 'primary';
                } else {
                    return '';
                }
            },
            dealText(prev, curr) {
                prev = parseFloat(prev);
                curr = parseFloat(curr);
                if (prev > curr) {
                    return 'S';
                } else if (prev < curr) {
                    return 'B';
                } else {
                    return '';
                }
            },
            showDetail(code) {
                var vm = this;
                vm.multipleSelection = [];
                var req = new Request('quote_detail/' + code, {method: 'GET', cache: 'reload'});
                fetch(req).then(
                    function(response) {
                        if (response.status !== 200) {
                            console.log('Status Code: ' + response.status);
                            return;
                        }
                        response.json().then(function(data) {
                            vm.gridData = data.data;
                            vm.dialogTableVisible = true;
                        });
                    }
                ).catch(function(err) {
                    console.log('Fetch Error: ' + err);
                });
            },
            handleDelete() {
                var vm = this;
                var data = new FormData();
                vm.multipleSelection.forEach(function(element) {
                    data.append("id[]", element.id);
                });
                var req = new Request('quote_delete', {method: 'POST', body: data});
                fetch(req).then(
                    function(response) {
                        if (response.status !== 200) {
                            console.log('Status Code: ' + response.status);
                            return;
                        }
                        response.json().then(function(data) {
                            vm.multipleSelection.forEach(function(sel) {
                                vm.gridData.forEach(function(grid, index) {
                                    if (sel.id == grid.id) {
                                        vm.gridData.splice(index, 1);
                                        return;
                                    }
                                });
                            });
                            vm.multipleSelection = [];
                        });
                    }
                ).catch(function(err) {
                    console.log('Fetch Error: ' + err);
                });
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            }
        },
        data: function(){
            return {
                dialogTableVisible: false,
                tableData: {!! $list !!},
                gridData: [],
                multipleSelection: []
            }
        }
    })
</script>
</html>